<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Sketch temporary geometries - 4.8</title>

  <link rel="stylesheet" type="text/css" href="http://localhost:8080/api47/arcgis_js_api/library/4.7/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" href="http://localhost:8080/api47/arcgis_js_api/library/4.7/esri/css/main.css" />
  <script src="http://localhost/api47/arcgis_js_api/library/4.7/dojo/dojo.js"></script>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      font-family: verdana;
    }

    #topbar {
      background: #fff;
      position: absolute;
      top: 15px;
      right: 15px;
      padding: 10px;
    }

    .action-button {
      font-size: 16px;
      background-color: transparent;
      border: 1px solid #D3D3D3;
      color: #6e6e6e;
      height: 32px;
      width: 32px;
      text-align: center;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    }

    .action-button:hover,
    .action-button:focus {
      background: #0079c1;
      color: #e4e4e4;
    }

    .active {
      background: #0079c1;
      color: #e4e4e4;
    }

  </style>

  <script>
    require([
    "esri/views/MapView",
    "esri/Map",
    "esri/widgets/Sketch/SketchViewModel",
    "esri/Graphic",
    "esri/layers/GraphicsLayer",
    "dojo/domReady!"
  ], function (
    MapView, Map,
    SketchViewModel, Graphic, GraphicsLayer
  ) {

    let editGraphic;
    // GraphicsLayer to hold graphics created via sketch view model
    const tempGraphicsLayer = new GraphicsLayer();

    const map = new Map({
      basemap: "gray",
      layers: [tempGraphicsLayer]
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      zoom: 3
    });

    view.when(function () {
      // create a new sketch view model
      const sketchViewModel = new SketchViewModel({
        view: view,
        layer: tempGraphicsLayer,
        pointSymbol: {
          type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
          style: "square",
          color: "#8A2BE2",
          size: "16px",
          outline: { // autocasts as new SimpleLineSymbol()
            color: [255, 255, 255],
            width: 3
          }
        },
        polylineSymbol: {
          type: "simple-line", // autocasts as new SimpleLineSymbol()
          color: "#8A2BE2",
          width: "4",
          style: "dash"
        },
        polygonSymbol: {
          type: "simple-fill", // autocasts as new SimpleFillSymbol()
          color: "rgba(138,43,226, 0.8)",
          style: "solid",
          outline: {
            color: "white",
            width: 1
          }
        }
      });

      setUpClickHandler();

      // Listen to create-complete event to add a newly created graphic to view
      sketchViewModel.on("draw-complete", addGraphic);

      // Listen the sketchViewModel's update-complete and update-cancel events
      sketchViewModel.on("update-complete", updateGraphic);
      sketchViewModel.on("update-cancel", updateGraphic);

      //*************************************************************
      // called when sketchViewModel's create-complete event is fired.
      //*************************************************************
      function addGraphic(event) {
        // Create a new graphic and set its geometry to
        // `create-complete` event geometry.
        const graphic = new Graphic({
          geometry: event.geometry,
          symbol: sketchViewModel.graphic.symbol
        });
        tempGraphicsLayer.add(graphic);
      }

      //***************************************************************
      // called when sketchViewModel's update-complete or update-cancel
      // events are fired.
      //*************************************************************
      function updateGraphic(event) {
        // event.graphic is the graphic that user clicked on and its geometry
        // has not been changed. Update its geometry and add it to the layer
        event.graphic.geometry = event.geometry;
        tempGraphicsLayer.add(event.graphic);

        // set the editGraphic to null update is complete or cancelled.
        editGraphic = null;
      }

      // ************************************************************************************
      // set up logic to handle geometry update and reflect the update on "tempGraphicsLayer"
      // ************************************************************************************
      function setUpClickHandler() {
        view.on("click", function(event) {
          view.hitTest(event).then(function(response) {
            var results = response.results;
            // Found a valid graphic
            if (results.length && results[results.length - 1].graphic) {
              // Check if we're already editing a graphic
              if (!editGraphic) {
                // Save a reference to the graphic we intend to update
                editGraphic = results[results.length - 1].graphic;
                // Remove the graphic from the GraphicsLayer
                // Sketch will handle displaying the graphic while being updated
                tempGraphicsLayer.remove(editGraphic);
                sketchViewModel.update(editGraphic);
              }
            }
          });
        });
      }

      //*************************************
      // activate the sketch to create a point
      //*************************************
      var drawPointButton = document.getElementById("pointButton");
      drawPointButton.onclick = function () {
        // set the sketch to create a point geometry
        sketchViewModel.create("point");
        setActiveButton(this);
      };

      //****************************************
      // activate the sketch to create a polyline
      //****************************************
      var drawLineButton = document.getElementById("polylineButton");
      drawLineButton.onclick = function () {
        // set the sketch to create a polyline geometry
        sketchViewModel.create("polyline");
        setActiveButton(this);
      };

      //***************************************
      // activate the sketch to create a polygon
      //***************************************
      var drawPolygonButton = document.getElementById("polygonButton");
      drawPolygonButton.onclick = function () {
        // set the sketch to create a polygon geometry
        sketchViewModel.create("polygon");
        setActiveButton(this);
      };

      //***************************************
      // activate the sketch to create a rectangle
      //***************************************
      var drawRectangleButton = document.getElementById(
        "rectangleButton");
      drawRectangleButton.onclick = function () {
        // set the sketch to create a polygon geometry
        sketchViewModel.create("rectangle");
        setActiveButton(this);
      };

      //***************************************
      // activate the sketch to create a circle
      //***************************************
      var drawCircleButton = document.getElementById("circleButton");
      drawCircleButton.onclick = function () {
        // set the sketch to create a polygon geometry
        sketchViewModel.create("circle");
        setActiveButton(this);
      };

      //**************
      // reset button
      //**************
      document.getElementById("resetBtn").onclick = function () {
        sketchViewModel.reset();
        tempGraphicsLayer.removeAll();
        setActiveButton();
      };

      function setActiveButton(selectedButton) {
        // focus the view to activate keyboard shortcuts for sketching
        view.focus();
        var elements = document.getElementsByClassName("active");
        for (var i = 0; i < elements.length; i++) {
          elements[i].classList.remove("active");
        }
        if (selectedButton) {
          selectedButton.classList.add("active");
        }
      }
    });
  });

</script>
</head>

<body>
  <div id="viewDiv">
    <div id="topbar">
      <button class="action-button esri-icon-blank-map-pin" id="pointButton"
        type="button" title="Draw point"></button>
      <button class="action-button esri-icon-polyline" id="polylineButton" type="button"
        title="Draw polyline"></button>
      <button class="action-button esri-icon-polygon" id="polygonButton" type="button"
        title="Draw polygon"></button>
      <button class="action-button esri-icon-checkbox-unchecked" id="rectangleButton"
        type="button" title="Draw rectangle"></button>
      <button class="action-button esri-icon-radio-unchecked" id="circleButton"
        type="button" title="Draw circle"></button>
      <button class="action-button esri-icon-trash" id="resetBtn" type="button"
        title="Clear graphics"></button>
    </div>
  </div>
</body>

</html>